6
6
.
.
9
9
V
V
i
i
e
e
w
w
s
s
-
-
C
C
u
u
s
s
t
t
o
o
m
m
Custom Views - Combine
//================================================================================
// STRUCTURE: User
//================================================================================
struct User {
var firstName : String
var lastName : String
var imageName : String
}
//================================================================================
// STRUCTURE: ContentView
//================================================================================
struct ContentView: View {
let user = User(firstName: "John", lastName: "Carpenter", imageName: "Person")
var body: some View {
UserDetails(user: user)
.border(Color.red, width: 2)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
}
//================================================================================
// CSUTOM VIEW: UserName
//================================================================================
struct UserName: View {
//PARAMETERS
var user: User
//VIEW LAYOUT
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
Text("First Name:").bold().padding(.bottom)
Text("Last Name:").bold()
}
VStack(alignment: .leading) {
Text(user.firstName).padding(.bottom)
Text(user.lastName)
}
}.frame(maxWidth: .infinity, alignment: .topLeading).padding()
}
}
}
//================================================================================
// CSUTOM VIEW: UserImage
//================================================================================
struct UserImage: View {
//PARAMETERS
var user: User
//VIEW LAYOUT
var body: some View {
VStack {
Image(user.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.border(Color.gray, width: 2)
.padding(.leading)
.padding(.trailing)
}
}
}
//================================================================================
// CSUTOM VIEW: UserDetails
//================================================================================
struct UserDetails: View {
//PARAMETERS
var user: User
//VIEW LAYOUT
var body: some View {
VStack(alignment: .leading) {
UserName (user: user).border(Color.red, width: 2)
UserImage(user: user).border(Color.red, width: 2)
}
}
}
List & Detail View
import SwiftUI
//==========================================================================
// ContentView
//==========================================================================
struct ContentView : View {
var body : some View {
NavigationView {
List {
NavigationLink("Stanford Dish", destination: DetailView(name: "Details for Stanford Dish"))
NavigationLink("Edgewood" , destination: DetailView(name: "Details for Edgewood" ))
NavigationLink("Mission Peak" , destination: DetailView(name: "Details for Mission Peak" ))
NavigationLink("Big Basin" , destination: DetailView(name: "Details for Big Basin" ))
NavigationLink("Alum Rock" , destination: DetailView(name: "Details for Alum Rock" ))
}.navigationBarTitle("Hiking Trails")
}.navigationViewStyle(StackNavigationViewStyle())
}
}
//==========================================================================
// DetailView
//==========================================================================
struct DetailView : View {
var name : String
var body : some View {
Text(name).navigationBarTitle("Detail View")
}
}
